<template>
    <div class="wrapper">
        <h1>PropsZi-1</h1>
        <h2>toy：{{ toy }}</h2>
        <h2>car：{{ car }}</h2>
        <button @click="onClick">setToy</button>
        <button @click="sendToy">给2</button>
    </div>
</template>

<script lang="ts" setup name="PropsZi1">

import { ref } from 'vue'
let toy = ref('奥特曼')
// <!-- 第一种 setToy 回调方法 -->
const props = defineProps(['car', 'setToy'])


function onClick() {
    // 回调方法
    props.setToy(`from props: ${toy.value}`)
}

// emmiter发送数据
import emitter from '@/utils/emitter'
function sendToy() {
    emitter.emit('sendToy', toy.value)
}

</script>

<style scoped>
.wrapper {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
    margin: 20px
}

button {
    margin: 0 5px;
}
</style>